<template>
  <div>
    <EvDrawer
      :drawer="drawer"
      :title="drawerTitle"
      size="45%"
      @handleClose="handleClose"
      @handleCancel="handleCancel"
      @handleConfirm="handleConfirm"
    >
      <el-form ref="form" :model="form" :rules="rules" :disabled="disabled" label-width="auto" size="medium">
        <div class="partTitle">{{ $t("common.common_base_Info") }}</div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="属性" prop="attribute">
              <el-input v-model="form.attribute" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="comment">
              <el-input v-model="form.comment"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属DTO" prop="dto">
              <el-input v-model="form.dto"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="editType">
              <el-select style="display: block" v-model="form.editType" clearable>
                <el-option v-for="item in editTypeItems" :key="item.k" :label="item.v" :value="item.k"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否表格显示" prop="isShowSelects">
              <el-radio-group v-model="form.isShowSelects">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否表单显示" prop="isShowSave">
              <el-radio-group v-model="form.isShowSave">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('common.common_remark')">
              <el-input type="textarea" v-model="form.memo" resize="none"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="partTitle">{{ $t("function-capp.sop") }}</div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('function-capp.sop')" prop="sop">
              <el-input
                v-model="form.sopName"
                :placeholder="$t('common.please_select') + $t('function-capp.sop')"
                clearable
                @clear="claerSop"
                @focus="$refs.sopSelect.open()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </EvDrawer>
  </div>
</template>
<script>
import { autoCode } from "@/utils/util";
export default {
  components: {},
  data() {
    return {
      drawer: false,
      drawerTitle: "",
      disabled: false,
      data: [],
      columns: [
        {
          title: "common.serial_number",
          fixed: "left",
          align: "center",
          width: 60,
          type: "seq",
        },
        { title: "common.file_name", field: "name", align: "left" },
        { title: "common.file_type", field: "type", align: "left" },
        {
          title: "common.file_size",
          field: "size",
          align: "left",
          slots: { default: "default_size" },
        },
        {
          title: "common.common_operate",
          field: "table_operate",
          fixed: "right",
          align: "left",
          resizable: false,
          slots: { default: "operation_default" },
        },
      ],
      serialNumbers: {},
      form: {
        code: null,
        resource: "启用",
      },
      rules: {
        operationCode: [{ required: true, trigger: "blur" }],
        operationName: [{ required: true, trigger: "change" }],
      },
      statusArray: [
        { value: "1", label: "启用" },
        { value: "0", label: "禁用" },
      ],
      sopItems: [],
      editTypeItems: [
        { v: "文本框", k: "dxTextBox" },
        { v: "下拉框", k: "dxSelectBox" },
        { v: "日期框", k: "dxDateBox" },
        { v: "时间框", k: "dxTimeBox" },
        { v: "日期时间框", k: "dxDateTimeBox" },
        { v: "数字框", k: "dxNumberBox" },
        { v: "复选框", k: "dxCheckBox" },
        { v: "单选框", k: "dxRadioGroup" },
        { v: "文本域", k: "dxTextArea" },
        { v: "下拉树", k: "dxTreeBox" },
        { v: "图片上传", k: "dxImageUpload" },
        { v: "图片上传多选", k: "dxImageUploadMultiple" },
        { v: "文件上传", k: "dxFileUpload" },
        { v: "文件上传多选", k: "dxFileUploadMultiple" },
        { v: "DTO表格", k: "dxDtoBox" },
      ],
    };
  },
  methods: {
    open(params, form) {
      const { drawerTitle, disabled, type } = params;
      this.drawerTitle = drawerTitle;
      this.disabled = disabled;
      if (type == "add") {
        this.form = { operationCode: null };
        this.data = [];
        this.getSerialNumber();
      } else {
        this.form = form;
      }
      this.init();
      this.drawer = true;
    },
    init() {
      if (this.form.sopDTO) {
        this.form.sopName = this.form.sopDTO.sopName;
        this.data = this.form.sopDTO.files ? JSON.parse(this.form.sopDTO.files) : [];
      }
      this.getDictionarys();
    },
    // 获取自动编号
    getSerialNumber() {
      autoCode
        .getSerialNumber("ProceduresSN", 1)
        .then((err) => {
          this.serialNumbers = err;
          this.$set(this.form, "operationCode", this.serialNumbers[0].serialNumber);
        })
        .catch((err) => {
          this.$message.error(err.data.message);
        });
    },
    confirmSerialNumber() {
      autoCode.confirmCode(this.serialNumbers);
    },
    expireDestroy() {
      autoCode.destroyCode();
    },
    handleCancel() {
      this.drawer = false;
    },
    handleClose() {
      this.drawer = false;
    },
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let obj = JSON.parse(JSON.stringify(this.form));
          let isUpdate = false;
          if (obj.id && obj.id != "") {
            isUpdate = true;
          }
          this.$server()
            .addOrUpdate("function-capp", "Procedures", obj, isUpdate)
            .then(() => {
              if (isUpdate) {
                this.$message.success(this.$t("common.common_edit_success"));
              } else {
                this.$message.success(this.$t("common.common_add_success"));
                this.confirmSerialNumber();
              }
              this.drawer = false;
              this.$emit("handleConfirm");
            })
            .catch((err) => {
              this.$message.error(err.data.message);
            });
        } else {
          return false;
        }
      });
    },
    getSopList() {
      this.$server()
        .query("function-capp", "Sop", null, null, null)
        .then((res) => {
          this.sopItems = res.list;
        });
    },
    getDictionarys() {
      this.$server()
        .batchQueryDictionary("工序类型")
        .then((response) => {
          this.operationTypeItems = response.filter((f) => f.title == "工序类型")[0].details;
        })
        .catch((response) => {
          this.$message.error(response.message);
        });
    },
    handleDialogConfirm(sops) {
      let sop = sops[0];
      this.form.sopDTO = sop;
      this.data = sop.files ? JSON.parse(sop.files) : [];
      this.$set(this.form, "sopName", sop.sopName);
    },
    claerSop() {
      this.form.sopDTO = null;
      this.data = [];
    },
    //获取文件大小
    getFileSize(v) {
      if (new Number(v / 1024 / 1024).toFixed(2) != "0.00") {
        return new Number(v / 1024 / 1024).toFixed(2) + "MB";
      } else if (new Number(v / 1024).toFixed(2) != "0.00") {
        return new Number(v / 1024).toFixed(2) + "KB";
      }
      return new Number(v).toFixed(2) + "B";
    },
    // 下载
    download(row) {
      let a = document.createElement("a");
      a.href = "/file/backend/download?id=" + row.id + "&token=" + sessionStorage.getItem("authorization_token");
      a.target = "_blank";
      a.click();
    },
    // 预览
    view(row) {
      window.open("/file/backend/view?id=" + row.id + "&token=" + sessionStorage.getItem("authorization_token"));
    },
  },
};
</script>
<style lang="scss" scoped>
.partTitle {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 12px 0;
}
</style>
